<template>
  <div class="container">
    <ul class="tools-box">
      <li
        v-for="item in tools"
        :key="item"
        @click="change(item)"
        :class="activeTool === item ? 'tools-item active' : 'tools-item'"
      >
        {{ item }}
      </li>
    </ul>
    <div class="tools-content">
      <el-input
        @input="handleInput"
        v-model="searchTool"
        clearable
        class="custom-input"
        placeholder="搜索工具"
        :suffix-icon="Search"
        @change="handleSearchChange"
      />

      <Meas ref="measRef" v-if="activeTool === '量测'" />
    </div>
  </div>
</template>

<script setup name="Shezhi">
import { ref, nextTick, watch } from "vue";
import Meas from "./meas/index.vue";
import { Search } from "@element-plus/icons-vue";

// 定义响应式数据
const tools = ref([
  "常用",
  "浏览",
  "查询",
  "分析",
  "定位",
  "量测",
  "标绘",
  "全部",
]);
const activeTool = ref("常用");  //默认选中常用
const searchTool = ref("");  //搜索框输入值
const measRef = ref(null); //量测组件的引用
// 定义方法
const change = (item) => {
  activeTool.value = item;
};
//用户按Enter时触发搜索
const handleSearchChange = (val) => {
  searchTool.value = val;
  if (measRef.value) {
    measRef.value.filterToolsByName(val);
  }
};

//搜索输入改变时触发 
const handleInput = (val) => {
  if (measRef.value) {
    setTimeout(() => {
      measRef.value.filterToolsByName(val);
    }, 300);
  }
};
</script>

<style lang="scss" scoped>
.container {
  .custom-input {
    width: 260px;
    margin-top: 18px;
  }
}
::v-deep .el-input__wrapper {
  background-color: rgba(16, 32, 46, 0.8);
  font-size: #fff;
  border: 1px solid #3e465b;
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}
::v-deep .is-focus {
  border-radius: 5px;
}
::v-deep .el-input__inner {
  color: #fff;
}
ul li {
  list-style: none;
}
.tools-item {
  padding: 15px 0;
  &:hover {
    background: #224a71cc;
  }
}
.active {
  background: #224a71cc;
}
.container {
  display: flex;

  position: relative;
  width: 100%;
  height: 100%;
}
.tools-box {
  width: 70px;
  height: 100%;
  text-align: center;
  padding: 10px 5px;
  cursor: pointer;
  border-right: 1px solid #ccc;
}
.tools-content {
  padding: 0 20px;

  width: calc(100% - 70px);
  height: 100%;
}
</style>
